<template>
  <ul v-if="type == 'disc'">
    <li class="item" v-for="item in data" :key="item.id" @click.stop="selectDisc(item)">
      <div v-if="avatar" class="avatar">
        <img v-lazy ="item.avatar" :width="size" :height="size">
      </div>
      <div class="text">
        <h2 v-html="item.name"></h2>
        <p v-html="item.desc"></p>
      </div>
    </li>
  </ul>
  <ul v-else-if="type == 'song'">
    <li class="item" @click.stop="emitSong(index,song)"
        v-for="(song,index) in data"
        :key="index">
      <div v-if="rank" class="rank">
        <div class="img" v-if="index < 3" :style="{'width':size+'px','height':size+'px'}">
          <img :src="bgImg(index)" :width="image" :height="image"/>
        </div>
        <div v-else class="index" :style="{'width':size+'px','height':size+'px'}">
          <h1 :style="{'line-height':size+'px'}">{{ index + 1 }}</h1>
        </div>
      </div>
      <div class="text">
        <h2>{{ song.name}}</h2>
        <p>{{ getDesc(song)}}</p>
      </div>
    </li>
  </ul>
</template>

<script>

    export default {
        name: "List",
        props: {
            data: {
              type: Array,
              default: null
            },
            avatar: {
                type: Boolean,
                default: false
            },
            size: {
              type: Number,
              default: 60
            },
            image: {
                type: Number,
                default: 25
            },
            type: {
                type: String,
                default: 'disc'
            },
            rank: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            getDesc(song){
                return `${song.singer}·${song.album}`
            },
            emitSong(index,song){
                console.log('emit song')
               this.$emit('select',{
                        list: this.data,
                        index,
                        song
                    })
            },
            selectDisc(disc){
                this.$emit('selectdisc',disc)
            },
            bgImg(index){
                return require(`./${index}.png`)
            }
        }
    }
</script>

<style scoped lang="stylus">
 @import "~common/stylus/variable"
   .item
    display flex
    width 90%
    padding 10px
    .avatar
      margin 0 10px
    .text
      flex 1
      display flex
      flex-direction column
      padding-left 10px
      h2
        margin-bottom .8rem
        margin-top 5px
        color $color-text
        font-size $font-size-medium-x
      p
        color $color-text-l
        font-size $font-size-medium

    .rank
      margin-right 10px
      .img
        display flex
        justify-content center
        align-items center
      .index
        text-align center
        h1
          color $color-theme
          font-size $font-size-large
</style>
